﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <title>Smartflow-Sharp工作流程设计工具</title>
    <link href="../content/layui/css/layui.css" rel="stylesheet" />
    <link href="../content/wf/icon/iconfont.css" rel="stylesheet" />
    <link href="../content/wf/design/smartflow.css" rel="stylesheet" />
    <link href="../content/wf/ztree/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    <script src="../content/jquery.min.js"></script>
    <script src="../content/wf/design/svg.js"></script>
    <script src="../content/layui/layui.all.js"></script>
    <script src="../content/wf/design/smartflow.js"></script>
    <script src="../content/wf/ztree/jquery.ztree.all.min.js"></script>
    <script src="../content/base64.min.js"></script>
    <script src="../content/common.js"></script>
</head>
<body>
    <div class="container_tools">
        <ul class="tools_menu clearfix" id="menus">
            <li command="save">
                <span class="iconfont iconsave5" title="保存"></span>
            </li>
            <li command="select">
                <span class="iconfont iconshubiaojiantou" title="选择"></span>
            </li>
            <li command="join">
                <span class="iconfont iconline icon-line" title="连线"></span>
            </li>
            <li command="node">
                <span class="iconfont iconweibiaoti-zhuanhuan-" title="节点"></span>
            </li>
            <li command="decision">
                <span class="iconfont iconlingxing icon-decision" title="判断节点"></span>
            </li>
            <li command="fork">
                <span class="iconfont iconchangfangxing2 icon-fork" title="分叉"></span>
            </li>
            <li command="merge">
                <span class="iconfont iconyuanxing1" title="聚合"></span>
            </li>
            <li command="form">
                <span class="iconfont iconbiaodan2 icon-form" title="表单"></span>
            </li>
            <li command="dynamic">
                <span class="iconfont iconziyouxian2 icon-dynamic" title="自由节点"></span>
            </li>
        </ul>
    </div>
    <div class="container container_right" id="attributes_tabs">
        <div id="workflow-help" class="attributes_tab">
            <table class="attribute_tab_table">
                <tr>
                    <td class="attribute_tab_table_column">方向</td>
                    <td class="attribute_tab_table_content">流程设计工具支持上下左右</td>
                </tr>
                <tr>
                    <td class="attribute_tab_table_column">规则</td>
                    <td class="attribute_tab_table_content">开始节点至少有一条出线，但没有进线、结束节点至少有一条进线，但没有出线，普通节点只能一进一出的连线，决策节点至少有一条进线，两条以上出线。分叉和汇聚总是成对出现。</td>
                </tr>
                <tr>
                    <td class="attribute_tab_table_column">连线</td>
                    <td class="attribute_tab_table_content">先点击左边线条图标，然后选中节点，按下鼠标左键拖动到另一节点，然后再松手</td>
                </tr>
                <tr>
                    <td class="attribute_tab_table_column">折线</td>
                    <td class="attribute_tab_table_content">先连线，连线完成后，按住Ctrl+Shift键，然后鼠标双击线条，就会出圆点，可以随意拖动</td>
                </tr>
                <tr>
                    <td class="attribute_tab_table_column">移动</td>
                    <td class="attribute_tab_table_content">先点击左边鼠标箭头，然后选择节点元素，按下鼠标左键进行移动</td>
                </tr>
                <tr>
                    <td class="attribute_tab_table_column">编辑</td>
                    <td class="attribute_tab_table_content">鼠标双击元素，编辑右边面板</td>
                </tr>
                <tr>
                    <td class="attribute_tab_table_column">删除</td>
                    <td class="attribute_tab_table_content">按住键盘中Ctrl+Alt键，然后鼠标双击元素，元素就会被删除</td>
                </tr>
            </table>
        </div>
        <div id="workflow-node" class="attributes_tab hide">
            <fieldset class="layui-elem-field" lay-filter="attributes_node_info" id="attributes_node_info">
                <legend>基础信息</legend>
                <div class="layui-field-box">
                    <form class="layui-form" lay-filter="form_node">
                        <div class="layui-form-item">
                            <input type="text" placeholder="请输入节点名称" class="layui-input" id="node_name" />
                        </div>
                        <div class="layui-form-item">
                            <input type="text" placeholder="额外数据" class="layui-input" id="node_extra" />
                        </div>
                        <div class="layui-form-item">
                            <input type="checkbox" name="Veto" id="node_veto" class="smartflow_checkbox_box" lay-ignore lay-skin="primary" title="否决权" />
                            <label for="node_veto" class="smartflow_checkbox_label">否决权</label>
                        </div>
                        <div class="layui-form-item">
                            <select placeholder="请选择退回策略" id="node_back_select" name="node_back_select" lay-filter="node_back_select" class="layui-select" style="width:100%;">
                                <option></option>
                                <option value="Smartflow.Core.Components.BackService">原路回退</option>
                                <option value="Smartflow.Core.Components.BackSenderService">回退到发起人</option>
                            </select>
                        </div>
                    </form>
                </div>
            </fieldset>
            <fieldset class="layui-elem-field" lay-filter="attributes_strategy" id="attributes_strategy">
                <legend>规则配置</legend>
                <div class="layui-field-box">
                    <div class="layui-form" lay-filter="form_rule" id="form_rule"></div>
                </div>
            </fieldset>
            <fieldset class="layui-elem-field" lay-filter="attributes_actor" id="attributes_actor" style="border:none;cursor:default;">
                <legend><span id="node_actor">参与者(点击选择参与者)</span></legend>
            </fieldset>
            <fieldset class="layui-elem-field" lay-filter="attributes_carbon" id="attributes_carbon" style="border:none;cursor:default;">
                <legend><span id="node_carbon">抄送(点击选择抄送)</span></legend>
            </fieldset>
            <fieldset class="layui-elem-field" lay-filter="attributes_action" id="attributes_action" style="border:none;cursor:default;">
                <legend><span id="node_action">自动定义动作(点击设置动作)</span></legend>
            </fieldset>
        </div>
    </div>
    <div class="container_ctr">
        <div class="container_draw" id="drawing"></div>
    </div>
    <script type="text/html" id="smartflow_s_info">
        <form class="layui-form" lay-filter="layui_flow_info" style="margin:10px;margin-right:30px;">
            <input type="hidden" name="Status" value="0" />
            <div class="layui-form-item">
                <label class="layui-form-label">流程名称</label>
                <div class="layui-input-block">
                    <input type="text" placeholder="请输入流程名称" name="Name" class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">业务类型</label>
                <div class="layui-input-block" style="position:relative;">
                    <input type="text" id="txtCategoryName" name="CategoryName" onclick="$('#zc').show()" class="layui-input" />
                    <input type="hidden" id="hidCategoryCode" name="CategoryCode" />
                    <div class="ztree-container" id="zc" onmouseleave="$('#zc').hide()">
                        <div class="ztree" id="ztree"></div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea class="layui-textarea" name="Memo" style="min-height:60px;"></textarea>
                </div>
            </div>
        </form>
    </script>
    <script src="../content/wf/design/design.js"></script>
    <script type="text/javascript">
        $(function () {
            var setting =design.Configuration({
                node: 'workflow-node',
                help:'workflow-help',
                container: 'drawing',
                categoryUrl: 'api/setting/category/list',
                categoryId: 'ztree',
                url: 'api/setting/structure/{id}/info',
                save: 'api/setting/structure/persistent',
                constraintID: 'form_rule',
                constraintUrl: 'api/setting/constraint/list'
            });
            $("#menus li").click(function () {
                var command = $(this).attr("command");
                var instance = $.SMF.getInstanceComponent();
                if ($.inArray(command, ['node', 'decision', 'form', 'fork', 'merge','dynamic']) > -1) {
                    instance.create(command);
                } else {
                    if (instance[command]) {
                        instance[command]();
                    } else {
                        setting.save();
                    }
                }
            });
        });
    </script>
</body>
</html>
